const indexLi1 = document.querySelectorAll('.first-row-ul1 li')
const indexImg1 = document.querySelector('.first-row-photo img')
for (let i = 0; i < indexLi1.length; i++) {
  indexLi1[i].addEventListener('mouseenter', function () {
    indexLi1[i].classList.add('active')
    indexImg1.src = `images/index-1 (${i + 1}).jpeg`
  })
}
for (let i = 0; i < indexLi1.length; i++) {
  indexLi1[i].addEventListener('mouseleave', function () {
    indexLi1[i].classList.remove('active')
  })
}
const indexobj1 = [
  { color: `rgb(235, 48, 55)` },
  { color: `rgb(35, 136, 123)` },
  { color: `rgb(244, 190, 25)` },
  { color: `rgb(214, 51, 50)` },
  { color: `rgb(59, 141, 215)` }
]
const indexUl1 = document.querySelector('.first-row-ul2 ul')
const indexTag = document.querySelectorAll('.first-row-two .tag')
indexUl1.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    document.querySelector('.first-row-ul2 ul li .active').classList.remove('active')
    e.target.classList.add('active')
    for (let i = 0; i <= indexTag.length; i++) {
      indexTag[i].innerHTML = e.target.innerText
      indexTag[i].style.color = `${indexobj1[e.target.dataset.id].color}`
      indexTag[i].style.borderColor = `${indexobj1[e.target.dataset.id].color}`
    }
  }
})
const indexLi2 = document.querySelectorAll('.third-row ul li')
for (let i = 0; i < indexLi2.length; i++) {
  indexLi2[i].addEventListener('mouseenter', () => {
    document.querySelector('.third-row ul li.active').classList.remove('active')
    indexLi2[i].classList.add('active')
  })
}
const indexImgs = document.querySelectorAll('.fourth-row img')
for (let i = 0; i < indexImgs.length; i++) {
  indexImgs[i].addEventListener('mouseenter', function () {
    for (let j = 0; j < indexImgs.length; j++) {
      if (j !== i) {
        indexImgs[j].style.opacity = '0.2'
      }
    }
  })
}
for (let i = 0; i < indexImgs.length; i++) {
  indexImgs[i].addEventListener('mouseleave', function () {
    for (let j = 0; j < indexImgs.length; j++) {
      if (j !== i) {
        indexImgs[j].style.opacity = '1'
      }
    }
  })
}